<template>
  <div class="content">
    <van-nav-bar title="RFID" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-form ref="form">
      <div class="form-item">
        <van-field
          readonly
          clickable
          label="室分系统："
          :value="selectedOption.text"
            @click="openPop"
          placeholder="请选择" >
        </van-field>
        <van-icon name="arrow-down" ></van-icon>
      </div>
      <van-list>
          <div class="rfif-list">
            <div>室分系统类型：</div>
            <div>RFID</div>
          </div>
          <div class="rfif-list">
            <div>室分系统名称：</div>
            <div>1号楼</div>
          </div>
          <div class="rfif-list">
            <div>室分系统地址：</div>
            <div>1#</div>
          </div>
        </van-list>
      <van-popup v-model="showSfxt" position="bottom" :style="{ height: '40%' }">
        <van-cell-group inset>
          <van-cell 
            v-for="(option, index) in options" 
            :key="index" 
            :title="option.text" 
            @click="selectOption(option)"
          />
        </van-cell-group>
      </van-popup>
    </van-form>
    <div class="title">{{ detailData.stationName }}</div>
    <van-tabs v-model="active">
      <van-tab title="拓补图">
        <div>
          <div class="device-status">
            <span class="add-font">设备状态:</span>
            <van-tag plain type="success">正常</van-tag>
            <van-tag plain type="danger">异常</van-tag>
            <van-tag plain type="warning">警告</van-tag>
          </div>
          <div class="add-top">
            <div class="add-font">设备部署:</div>
            <div class="img-font" @click="imgClk(1, require('../../assets/dxq.png'))">
              <div  class="device-img"><img src="../../assets/dxq.png" /></div>
              <div>读卡器</div>

            </div>
            <div class="img-font" @click="imgClk(2, require('../../assets/tx.png'))">
              <div class="device-img"><img src="../../assets/tx.png" /></div>
              <div>天线</div>
            </div>
            <div class="img-font" @click="imgClk(3, require('../../assets/hlq.png'))">
              <div class="device-img"><img src="../../assets/hlq.png" /></div>
              <div>合路器</div>
            </div>

          </div>
          <div>
            <!-- <div id="topology-diagram"></div> -->
            <!-- <div class="devices-btn-right">
              <van-button @click="zoomIn">
                +
              </van-button>
              <van-button>{{ scale.toFixed(2) }}</van-button>
              <van-button @click="zoomOut">
                -
              </van-button>
            </div> -->
          </div>
        </div>

      </van-tab>
      <van-tab title="楼层图">
        <div>
          <div class="device-status">
            <span class="add-font">设备状态:</span>
            <van-tag plain type="success">正常</van-tag>
            <van-tag plain type="danger">异常</van-tag>
            <van-tag plain type="warning">警告</van-tag>
          </div>
          <div class="add-top">
            <div class="add-font">设备部署:</div>
            <div class="img-font" @click="imgClk(1, require('../../assets/dxq.png'))">
              <div  class="device-img"><img src="../../assets/dxq.png" /></div>
              <div>读卡器</div>

            </div>
            <div class="img-font" @click="imgClk(2, require('../../assets/tx.png'))">
              <div class="device-img"><img src="../../assets/tx.png" /></div>
              <div>天线</div>
            </div>
            <div class="img-font" @click="imgClk(3, require('../../assets/hlq.png'))">
              <div class="device-img"><img src="../../assets/hlq.png" /></div>
              <div>合路器</div>
            </div>

          </div>
          <div>
            <div class="devices-btn-right">
              <van-button @click="zoomIn">
                +
              </van-button>
              <van-button>{{ scale.toFixed(2) }}</van-button>
              <van-button @click="zoomOut">
                -
              </van-button>
            </div>
          </div>
        </div>

      </van-tab>
      <van-tab title="楼层统计">
        <div style="background: #fff;padding: 10px;">
          <div class="Echarts-item">
            <div class="Echarts-title">设备数量:
            </div>
          </div>
          <div class="Echarts-item">
            <div class="Echarts-title">告警设备数量:
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'rfifDetail',
  data() {
    return {
      active: 0,
      value: '',
      imgActive: 0,
      imgActive1: 0,
      scale: 1,
      detailData:{},
      showSfxt:false,
      selectedOption:{},
      options: [
        { text: '1号楼', value: '1' },
        { text: '2号楼', value: '2' },
        { text: '3号楼', value: '3' },
        { text: '4号楼', value: '4' },
        { text: '5号楼', value: '5' },
        { text: '6号楼', value: '6' }
      ],
    };
  },
  created(){
    if(this.$route.query){
      this.detailData = this.$route.query;
      // this.getGojs();
    }
  },
  mounted(){
    
  },
  methods: {
    getGojs(){
      const diagramDiv = document.getElementById('topology-diagram');
      const diagram = new go.Diagram(diagramDiv);
  
      diagram.model = new go.GraphLinksModel(
        [
          { key: 'node1', text: '节点1' },
          { key: 'node2', text: '节点2' },
        ],
        [
          { from: 'node1', to: 'node2' },
        ]
      );
      // 添加模板到Diagram
      diagram.nodeTemplate = this.nodeStyle();
      diagram.linkTemplate = this.linkStyle();
    },
    // 自定义节点和链接的外观
    nodeStyle() {
      return new go.Binding('location', 'loc').makeCompiled();
    },
    linkStyle() {
      const link = new go.Link();
      // 自定义链接的路由或形状
      link.routing = go.Link.Orthogonal;
      return link;
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onSearch() {
    },
    onCancel() {
    },
    imgClk(type, url) {
      this.iconImg = url;
      if (this.imgActive == type) {
        this.imgActive = -1;
      } else {
        this.imgActive = type;
      }
    },
    zoomIn() {
      this.scale += 0.1;
    },
    zoomOut() {
      this.scale -= 0.1;
    },
    openPop(){
      this.showSfxt = true
    },
    selectOption(option) {
      this.selectedOption = option;
      this.showSfxt = false;
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar__content {
  background-color: #fff;
  border-bottom: 1px #ccc solid;
}

::v-deep .van-nav-bar__title {
  color: #000;
}

::v-deep .van-nav-bar .van-icon {
  color: #02a7f0;
}

::v-deep .van-nav-bar__text {
  color: #02a7f0;
}

::v-deep .van-tab--active {
  color: #eb4b4b;
}

::v-deep .van-cell-group {
  margin: 13px 0;
}

::v-deep .van-cell__title {
  font-size: 16px;
  color: #000;
}

.add-content {
  font-size: 16px;
}

.add-top {
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px;
}

.add-font {
  font-size: 16px;
  padding: 0 3px;
}

.img-font {
  text-align: center;
  font-size: 12px;
  padding: 3px 5px;
    width: 40px;
}

.img-font.active {
  box-shadow: 0 0 3px #000;
}

.device-status {
  display: flex;
  align-items: center;
  font-size: 16px;
  background-color: #fff;
  padding: 10px;
  span{
    margin-right: 10px;
  }
}

.device-status-item {
  display: inline-block;
  width: 60px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fd0807;
  color: #fff;
  margin: 0 10px;
}

.item {
  font-size: 14px;
  display: flex;
  padding: 0 7%;
  height: 30px;
  justify-content: space-between;
}

.content {
  background-color: #cccccc4a;
}

.title {
  font-size: 18px;
  background-color: #fff;
  height: 42px;
  /* margin: 5px 10px; */
  line-height: 42px;
  margin: 5px 0;
  padding: 0 10px;
}

.Echarts-item {
  border: 1px #ccc solid;
  border-radius: 10px;
  background-color: #fff;
  padding: 20px;
  margin-bottom: 10px;
}

.Echarts-title {
  font-size: 20px;
  font-weight: 700;
}

.devices-btn-right {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;

  button {
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 0;
    border-top: none;

    &:first-child {
      height: 30px;
    }

    &:last-child {
      height: 30px;
    }
  }
}
.device-img{
    img{
      height: 20px;
    }
  }
  .form-item{
    display: flex;
    justify-content: space-between;    
    background: #fff;
    .van-icon-arrow-down:before{
      font-size: 16px;
      margin-right:20px;
    }
    .van-icon-scan, .van-icon-photograph{
      font-size: 16px;
      margin-right: 20px;
      margin-top: 10px;
    }
    &.start{
      justify-content: flex-start;
      .van-cell{
        width: 120px;
      }
    }
  }
  .rfif-list{
    display: flex;
    justify-content: flex-start;
    font-size:14px;
    line-height: 30px;
    text-indent: 24px;
  }
</style>